
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="UTF-8">
            <title>月报报告 - 2025-06</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <style>
                :root {
                    --ios-blue: #778899;
                    --ios-light-gray: #F2F2F7;
                    --ios-dark-gray: #1C1C1E;
                    --ios-card-bg: #FFFFFF;
                    --ios-border: #D1D1D6;
                    --ios-green: #34C759;
                    --ios-orange: #FF9500;
                }

                body {
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
                    line-height: 1.5;
                    color: var(--ios-dark-gray);
                    background-color: var(--ios-light-gray);
                    margin: 0;
                    padding: 20px;
                    min-height: 100vh;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                }

                .container {
                    width: 100%;
                    max-width: 900px;
                    margin: 0 auto;
                }

                .header {
                    background-color: var(--ios-blue);
                    color: white;
                    padding: 16px 20px;
                    margin-bottom: 16px;
                    border-radius: 10px;
                    width: 100%;
                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
                }

                .report-title {
                    font-size: 20px;
                    font-weight: 600;
                    margin: 0 0 8px 0;
                    letter-spacing: 0.5px;
                }

                .report-info {
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    gap: 12px;
                    font-size: 14px;
                    opacity: 0.9;
                }

                .report-info span {
                    display: flex;
                    align-items: center;
                }

                .report-info i {
                    margin-right: 6px;
                    font-size: 12px;
                }

                .report-container {
                    background: var(--ios-card-bg);
                    border-radius: 10px;
                    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
                    padding: 20px;
                    width: 100%;
                    overflow-x: auto;
                }

                table {
                    width: 100%;
                    border-collapse: collapse;
                    margin: 12px 0;
                    font-size: 14px;
                }

                th, td {
                    padding: 14px 16px;
                    text-align: left;
                    border-bottom: 1px solid var(--ios-border);
                }

                th {
                    background-color: var(--ios-blue);
                    color: white;
                    font-weight: 500;
                    position: sticky;
                    top: 0;
                    white-space: nowrap;
                }

                tr:hover {
                    background-color: rgba(0, 122, 255, 0.05);
                }

                .status-completed {
                    color: var(--ios-green);
                    font-weight: 500;
                }

                .status-inprogress {
                    color: var(--ios-orange);
                    font-weight: 500;
                }

                .work-hour {
                    text-align: right;
                    font-weight: 500;
                    width: 80px; /* 增加工时列宽度 */
                    color: var(--ios-dark-gray);
                }
                
                .workload {
                    text-align: right;
                    font-weight: 500;
                    width: 80px; /* 增加工时列宽度 */
                    color: var(--ios-dark-gray);
                }

                .department-cell {
                    font-weight: 500;
                    color: var(--ios-dark-gray);
                    white-space: nowrap;
                }

                .type-cell {
                    color: #636366;
                }

                .long-text {
                    max-width: 280px;
                    word-wrap: break-word;
                    line-height: 1.4;
                }

                .footer {
                    text-align: center;
                    margin-top: 24px;
                    color: #8E8E93;
                    font-size: 12px;
                    width: 100%;
                }

                .no-data {
                    text-align: center;
                    padding: 40px;
                    color: #8E8E93;
                    font-style: italic;
                }
                .tooltip {
                    position: relative;
                    display: inline-flex;
                    align-items: center;
                    cursor: help;
                }
                
                .tooltip .tooltiptext {
                    visibility: hidden;
                    position: absolute;
                    top: 100%;
                    left: 50%;
                    transform: translateX(-50%);
                    z-index: 9999;
                    
                    width: 260px;
                    max-width: 90vw;
                    padding: 12px;
                    margin-top: 10px;
                    
                    background-color: var(--ios-dark-gray);
                    color: white;
                    border-radius: 8px;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                    
                    font-size: 13px;
                    line-height: 1.5;
                    text-align: left;
                    white-space: normal;
                    word-wrap: break-word;
                    
                    opacity: 0;
                    transition: opacity 0.2s ease, transform 0.2s ease;
                }
                
                .tooltip:hover .tooltiptext {
                    visibility: visible;
                    opacity: 1;
                    transform: translateX(-50%) translateY(5px);
                }
                
                /* 添加小箭头 */
                .tooltip .tooltiptext::after {
                    content: "";
                    position: absolute;
                    top: 100%;
                    left: 50%;
                    transform: translateX(-50%);
                    border-width: 8px;
                    border-style: solid;
                    border-color: transparent transparent var(--ios-dark-gray) transparent;
                }

                                
                @media (max-width: 768px) {
                    body {
                        padding: 12px;
                    }

                    .container {
                        max-width: 100%;
                    }

                    th, td {
                        padding: 12px 10px;
                        font-size: 13px;
                    }

                    .long-text {
                        max-width: 280px;
                    }
                }
            </style>
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
        </head>
        <body>
            <div class="container">
                <div class="header">
                    <h1 class="report-title">月报报告 - 2025-06</h1>
                    <div class="report-info">
                        <span><i class="fas fa-user"></i> 作者: 李亚东</span>
                        <span><i class="fas fa-building"></i> 部门: 项目开发部</span>
                        <span><i class="fas fa-calendar-alt"></i> 报告类型: 月报</span>
                    </div>
                </div>

                <div class="report-container">
        
                <table>
                    <thead>
                        <tr>
                            <th><i class="fas fa-building"></i> 部门</th>
                            <th><i class="fas fa-tag"></i> 类型</th>
                            <th><i class="fas fa-tasks"></i> 工作内容</th>
                            <th><i class="fas fa-check-circle"></i> 状态</th>
                            <th><i class="fas fa-comment"></i> 效果/备注</th>
                            <th class="work-hour">
                                <span class="tooltip">
                                    <i class="fas fa-clock"></i> 节省工时/月
                                    <span class="tooltiptext">节省工时是以月为单位统计，每个项目因每月工作频次、瞬时工作量等因素可能发生变化，所以该值为预估数值、并非精准。</span>
                                </span>
                            </th>
                            <th class="workload"><i class="fas fa-clock"></i> 节省工作量</th>
                        </tr>
                    </thead>
                    <tbody>
            
                        <tr>
                            <td class="department-cell">人事部门</td>
                            <td class="type-cell">维护优化</td>
                            <td>加班统计跨月申请，影响最终统计结果</td>
                            <td class="status-inprogress">进行中</td>
                            <td>以优化完成</td>
                            <td class="work-hour">0.0</td>
                            <td class="workload"></td>
                        </tr>
                
                    </tbody>
                </table>
            
                </div>

                <div class="footer">
                    <p>报告生成时间: <span id="datetime"></span></p>
                    <p><i class="fas fa-copyright"></i> 2025 公司名称. 保留所有权利.</p>
                </div>
            </div>

            <script>
                document.getElementById('datetime').textContent = new Date().toLocaleString();
            </script>
        </body>
        </html>
        